import { getUUID } from '@/utils';

// 请求基础属性
export const requestConfig = {
	reqID: '',
	sourceID: '',
	requestDataType: 0,
	requestInterval: 30,
	requestIntervalUnit: '秒',
	pageKey: ''
};

// 单实例类
export class PublicConfigClass {
	id = getUUID();
	parentId = '';
	isGroup = false;
	show = true;
	// 基本样式
	styles = {
		// 透明
		opacity: 1,
		// 旋转
		rotateZ: 0,
		rotateX: 0,
		rotateY: 0,
		// 倾斜
		skewX: 0,
		skewY: 0,
		// 动画
		animations: []
	};
	// 状态
	status = {
		lock: false,
		hide: false
	};
	orgConfig = {
		// 基本信息
		attr: {
			x: 50,
			y: 50,
			w: 500,
			h: 300,
			// 不建议动 offset
			offsetX: 0,
			offsetY: 0,
			zIndex: 0
		},
		// 事件
		events: {
			// 基础事件
			baseEvent: {
				click: undefined,
				dblclick: undefined,
				mouseenter: undefined,
				mouseleave: undefined
			},
			// 组件自身的触发事件
			EventTypeName: {
				click: '单击',
				dblclick: '双击',
				mouseenter: '鼠标移入',
				mouseleave: '鼠标移出'
			},
			// 组件的交互事件
			interactEvents: [
				// {
				// 	"interactOn": "myChange",// 组件自身的触发事件
				// 	"interactComponentId": "4ujusv2yflo00", // 被交互的组件
				// 	"interactFn": "changShow" // 被交互的组件事件
				// }
			],
			// 交互触发方法（组件的自定义方法）
			interactHandler: {
				// [activeCompId]: {
				// 	[fn]: FnString
				// }
			}
		},
		// 组件抛出的可触发事件
		interactActions: [
			{
				name: '显示',
				type: 'show'
			},
			{
				name: '隐藏',
				type: 'hide'
			},
			{
				name: '显示/隐藏',
				type: 'changShow'
			},
			{
				name: '自定义',
				type: 'customEvent'
			}
		]
	};
	constructor(events, data) {
		// 设置默认事件
		if (events) {
			this.orgConfig.events = Object.assign(this.orgConfig.events, events);
		}
		// 设置组件具备的被触发逻辑，组件具备数据
		if (data) {
			// 添加请求
			this.orgConfig.request = cloneDeep(requestConfig);
			// 数据过滤
			this.orgConfig.filter = undefined;
			// 添加更新数据逻辑
			this.orgConfig.interactActions.unshift({
				name: '更新数据',
				type: 'update'
			});
		}
	}
}

// 多选成组类
export class PublicGroupConfigClass extends PublicConfigClass {
	// 成组
	isGroup = true;
	title = '分组';
	image = '';
	// 组成员列表
	groupList = [];
	// ---- 原有 ---
	// key
	key = 'group';
	// 配置
	option = {};
	// 标识
	id = getUUID();
	parentId = '';
	orgConfig = {
		// 基本信息
		attr: { w: 0, h: 0, x: 0, y: 0, offsetX: 0, offsetY: 0, zIndex: 0 }
	};
}

// 础数据配置
import BasicsData from './configComponents/BasicsData/index.vue';
// 事件配置
import BasicsEvent from './configComponents/BasicsEvent/index.vue';
// 基础配置
import BasicsSetting from './configComponents/BasicsSetting/index.vue';
// 右边配置组件
import BasicsConfig from './configComponents/BasicsConfig/index.vue';
// 组件拖拽加入子组件
import BasicsDrop from '@/views/chart/drop.vue';
// 静态数据组件
import ChartDataMatchingAndShow from './configComponents/BasicsData/components/ChartDataMatchingAndShow/index.vue';
// 动态数据组件
import ChartDataAjax from './configComponents/BasicsData/components/ChartDataAjax/index.vue';
// 外部接口
import ChartDataAjaxOut from './configComponents/BasicsData/components/ChartDataAjaxOut/index.vue';

// 相关布局组件
import CollapseItem from './my-echarts-setting/CollapseItem.vue';
import SettingItem from './my-echarts-setting/SettingItem.vue';
import SettingItemBox from './my-echarts-setting/SettingItemBox.vue';

// 拖拽排序组件
import { VueDraggableNext } from 'vue-draggable-next';
// form表单组件
import MyForm from './my-form';
// 日期组件
import MyDatePicker from './my-date-picker';
// 输入框
import MyInput from './my-input';
// 数字输入框
import MyInputNumber from './my-input-number';
// 数据分页组件
import MyListPanel from './my-list-panel';
// 数字组件
import MyNumber from './my-number';
// 分页组件
import MyPager from './my-pager';
// 面板容器
import MyPanel from './my-panel';
// 下拉选择框
import MySelect from './my-select';
// 表格组件（使用数据渲染）
import MyTable from './my-table';
// 图标组件，包含ui自带组件以及svg自定义组件
import MyIcon from './my-icon';
// json等语言编辑器
import MyMonacoEditor from './my-monaco-editor';
// 单张图片上传
import { MyImgUploadOne } from './my-img-upload';
// 菜单组件
import MyMenu from './my-menu';

export const components = {
	BasicsData,
	BasicsEvent,
	BasicsSetting,
	BasicsConfig,
	BasicsDrop,
	ChartDataMatchingAndShow,
	ChartDataAjax,
	ChartDataAjaxOut,
	CollapseItem,
	SettingItem,
	SettingItemBox,
	VueDraggableNext,
	MyForm,
	MyDatePicker,
	MyInput,
	MyInputNumber,
	MyListPanel,
	MyNumber,
	MyPager,
	MyPanel,
	MySelect,
	MyTable,
	MyIcon,
	MyMonacoEditor,
	MyImgUploadOne,
	MyMenu
};
